【I Love Vue 】 Day 22 愛荷華博弈任務(三) - 專案建置與引用套件

12th鐵人賽

kyminjob

2020-10-06 15:30:25

637 瀏覽

分享至

做了這麼久的準備，終於讓我們千呼萬喚始出來。
開始建立我們的專案吧。

建立專案

建立專案 (詳細安裝方式:環境建置(三) )

vue create iowa_gambling_task

建立工作區(若有開啟工作區，要先關閉之後再建立)
安裝 VSCode 的小工具(之前有安裝的就不用再安裝了)
(這邊有教學)

4.修改網頁的名稱為:愛荷華博弈任務 --> 這邊有教學
(透過vue.config.js來進行修改。)

到這邊為止就把我們的專案都建置完成了，接下來將需要用到的套件引入。

安裝套件與設定

vue-router

Terminal輸入

npm i vue-router@next

接著我們來做一些設定

在src裡面新增一個資料夾layout
(這個資料夾會用來存放我們版面用的.vue檔案)
在layout裡面新增index.vue(做為我們的首頁)
index.vue 裡面寫:

<template>
  <p> this is index </p>
</template>

<script>
export default {
  name: 'index',
  components: {
  }
}
</script>

(方便我們等一下做測試)

在src裡面新增一個檔案 router.js
在router.js裡面寫下方程式碼:

import { createRouter, createWebHistory } from 'vue-router'
import index from './layout/index.vue'
const routerHistory = createWebHistory()
const router = createRouter({
    history: routerHistory,
    routes: [
      {
        path: '/',
        component: index
      },
    ]
  })
  
  export default router

在之後畫面切換的部分，我們都會由router這邊來進行處理。

history: routerHistory,

使用歷史模式

path: '/',
component: index

這兩行表示我們用 index.vue裡面的index當作我們的首頁

修改main.js:

import { createApp } from 'vue'
import App from './App.vue'
import router from './router' //引用router


var app = createApp(App)
app.use(router) // 使用 router
app.mount('#app')

在這邊引用我們剛剛寫好的router.js

到這邊我們就都設定完成了，
接下來測試一下剛剛設定完成的router是不是真的能派上用場。

修改App.vue:

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <router-view/>
</template>

<script>

export default {
  name: 'App',
  components: {
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

將 HelloWord.vue 拿掉，並加入了<router-view/>
9. 看一下成果

可以看到我們只要加入<router-view/>之後，沒做任何設定的時候就會顯示index.vue的畫面。
(剛剛有在router.js上面設定預設首頁為index)
若之後想要切換畫面的時候，
我們也可以透過<router-link>來修改我們<router-view/>的內容。

這邊就完全設定好vue-router了。

vuex

Terminal輸入

npm install vuex@next --save

在src裡面新增一個檔案 vuex.js
在vuex.js輸入下列程式碼:

import { createStore } from 'vuex'

 const store = createStore({
    state () {
        return {
          count: 0
        }
      },
      mutations: {
        increment(state){
            state.count++
        }
      },
  actions: {}
})
export default store

我們在裡面新增了一個狀態count，
順便寫了一個function() increment，
每當觸發increment() ， count的數值就加一
(方便等一下做測試)

接著修改main.js:

import { createApp } from 'vue'
import App from './App.vue'
import router from './router' //引用./router 中的 router
import store from './vuex' //引用./vuex中的 store


var app = createApp(App)
app.use(router) // 使用 router
app.use(store) // 使用 store

app.mount('#app')

將我們寫好的store加入到app中

修改App.vue來進行一下測試:
template:

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <router-view/>
  <button @click='test'>按一下</button>
</template>

新增一個按鈕，按下去之後觸發test()

script:

<script>
import store from './vuex' // 引用 store
export default {
  name: 'App',
  store:store, //使用 store
  components: {
  },
  methods:{
    test(){
     store.commit('increment') //執行 store中的 increment
      alert('count:' + store.state.count)

    }
  }
}
</script>

載入store並使用。
這邊的test() 等同於 test :function() 的縮寫。
當執行test()之後會觸發 increment()，
之後再顯示 store裡面count的數值。